<template>
  <div class="dashboard">
    <ARow :gutter="16">
      <!-- 统计卡片 -->
      <ACol :xs="24" :sm="12" :lg="6">
        <ACard class="stat-card">
          <AStatistic
            title="总用户数"
            :value="1128"
            :value-style="{ color: '#3f8600' }"
          >
            <template #prefix>
              <UserOutlined />
            </template>
          </AStatistic>
        </ACard>
      </ACol>

      <ACol :xs="24" :sm="12" :lg="6">
        <ACard class="stat-card">
          <AStatistic
            title="总订单数"
            :value="2893"
            :value-style="{ color: '#1890ff' }"
          >
            <template #prefix>
              <ShoppingOutlined />
            </template>
          </AStatistic>
        </ACard>
      </ACol>

      <ACol :xs="24" :sm="12" :lg="6">
        <ACard class="stat-card">
          <AStatistic
            title="总收入"
            :value="9280"
            :precision="2"
            prefix="¥"
            :value-style="{ color: '#cf1322' }"
          >
            <template #prefix>
              <DollarOutlined />
            </template>
          </AStatistic>
        </ACard>
      </ACol>

      <ACol :xs="24" :sm="12" :lg="6">
        <ACard class="stat-card">
          <AStatistic
            title="活跃用户"
            :value="893"
            :value-style="{ color: '#faad14' }"
          >
            <template #prefix>
              <TeamOutlined />
            </template>
          </AStatistic>
        </ACard>
      </ACol>
    </ARow>

    <ARow :gutter="16" style="margin-top: 16px">
      <ACol :xs="24" :lg="16">
        <ACard title="近7日访问趋势" :bordered="false">
          <VChart class="chart" :option="lineOption" autoresize />
        </ACard>
      </ACol>

      <ACol :xs="24" :lg="8">
        <ACard title="用户来源占比" :bordered="false">
          <VChart class="chart" :option="pieOption" autoresize />
        </ACard>
      </ACol>
    </ARow>

    <ARow :gutter="16" style="margin-top: 16px">
      <ACol :xs="24">
        <ACard title="核心指标对比" :bordered="false">
          <VChart class="chart" :option="barOption" autoresize />
        </ACard>
      </ACol>
    </ARow>

    <ARow :gutter="16" style="margin-top: 16px">
      <ACol :xs="24" :lg="16">
        <ACard title="最近动态" :bordered="false">
          <AList
            :data-source="activities"
            item-layout="horizontal"
          >
            <template #renderItem="{ item }">
              <AListItem>
                <AListItemMeta :description="item.time">
                  <template #title>
                    {{ item.title }}
                  </template>
                  <template #avatar>
                    <AAvatar :style="{ backgroundColor: item.color }">
                      {{ item.user }}
                    </AAvatar>
                  </template>
                </AListItemMeta>
              </AListItem>
            </template>
          </AList>
        </ACard>
      </ACol>

      <ACol :xs="24" :lg="8">
        <ACard title="快捷入口" :bordered="false">
          <div class="quick-links">
            <div class="link-item" @click="handleQuickLink('/system/user')">
              <UserOutlined class="icon" />
              <span>用户管理</span>
            </div>
            <div class="link-item" @click="handleQuickLink('/system/role')">
              <TeamOutlined class="icon" />
              <span>角色管理</span>
            </div>
            <div class="link-item" @click="handleQuickLink('/system/menu')">
              <MenuOutlined class="icon" />
              <span>菜单管理</span>
            </div>
            <div class="link-item" @click="handleQuickLink('/system/user')">
              <SettingOutlined class="icon" />
              <span>系统设置</span>
            </div>
          </div>
        </ACard>
      </ACol>
    </ARow>
  </div>
</template>

<script>
export default {
  name: 'Dashboard'
}
</script>

<script setup>
import { reactive, ref } from 'vue'
import { useRouter } from 'vue-router'
import {
  UserOutlined,
  ShoppingOutlined,
  DollarOutlined,
  TeamOutlined,
  MenuOutlined,
  SettingOutlined
} from '@ant-design/icons-vue'
// echarts 按需引入
import { use } from 'echarts/core'
import VChart from 'vue-echarts'
import { CanvasRenderer } from 'echarts/renderers'
import { LineChart, PieChart, BarChart } from 'echarts/charts'
import {
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent
} from 'echarts/components'

use([
  CanvasRenderer,
  LineChart,
  PieChart,
  BarChart,
  TitleComponent,
  TooltipComponent,
  GridComponent,
  LegendComponent,
  DatasetComponent
])

const router = useRouter()

const activities = reactive([
  { user: '张三', title: '创建了新的用户账号', time: '2024-01-20 10:30', color: '#1890ff' },
  { user: '李四', title: '更新了系统配置', time: '2024-01-20 09:15', color: '#52c41a' },
  { user: '王五', title: '删除了过期数据', time: '2024-01-19 16:45', color: '#faad14' },
  { user: '赵六', title: '导出了用户报表', time: '2024-01-19 14:20', color: '#f5222d' },
  { user: '钱七', title: '修改了角色权限', time: '2024-01-19 11:00', color: '#722ed1' }
])

const handleQuickLink = (path) => {
  router.push(path)
}

// 折线图：近7日访问趋势（示例数据）
const lineOption = ref({
  grid: { left: 16, right: 16, bottom: 24, top: 32, containLabel: true },
  tooltip: { trigger: 'axis' },
  xAxis: {
    type: 'category',
    boundaryGap: false,
    data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
  },
  yAxis: { type: 'value', splitLine: { lineStyle: { type: 'dashed' } } },
  series: [
    {
      name: '访问量',
      type: 'line',
      smooth: true,
      showSymbol: false,
      areaStyle: {
        color: 'rgba(24, 144, 255, 0.15)'
      },
      itemStyle: { color: '#1890ff' },
      data: [120, 200, 150, 260, 230, 340, 310]
    }
  ]
})

// 饼图：用户来源占比（示例数据）
const pieOption = ref({
  tooltip: { trigger: 'item' },
  legend: { bottom: 0 },
  series: [
    {
      name: '来源',
      type: 'pie',
      radius: ['40%', '70%'],
      avoidLabelOverlap: false,
      itemStyle: { borderRadius: 6, borderColor: '#fff', borderWidth: 2 },
      label: { show: false, position: 'center' },
      emphasis: { label: { show: true, fontSize: 16, fontWeight: 'bold' } },
      data: [
        { value: 335, name: '直接访问' },
        { value: 310, name: '搜索引擎' },
        { value: 234, name: '外部链接' },
        { value: 135, name: '邮件营销' }
      ]
    }
  ]
})

// 柱状图：核心指标对比（示例数据）
const barOption = ref({
  tooltip: { trigger: 'axis', axisPointer: { type: 'shadow' } },
  legend: { top: 0 },
  grid: { left: 16, right: 16, bottom: 24, top: 36, containLabel: true },
  xAxis: [
    {
      type: 'category',
      data: ['新增用户', '订单量', '收入(¥)', '退款(¥)']
    }
  ],
  yAxis: [
    { type: 'value', splitLine: { lineStyle: { type: 'dashed' } } }
  ],
  series: [
    {
      name: '本周',
      type: 'bar',
      itemStyle: { color: '#1890ff' },
      barWidth: 16,
      data: [320, 452, 9800, 120]
    },
    {
      name: '上周',
      type: 'bar',
      itemStyle: { color: '#73d13d' },
      barWidth: 16,
      data: [280, 401, 8700, 160]
    }
  ]
})
</script>

<style lang="scss" scoped>
.dashboard {
  .stat-card {
    :deep(.ant-card-body) {
      padding: 24px;
    }
  }

  .quick-links {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;

    .link-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      padding: 24px;
      background: var(--link-item-bg);
      border-radius: 4px;
      cursor: pointer;
      transition: all 0.3s;

      &:hover {
        background: var(--link-item-hover-bg);
        transform: translateY(-2px);
        box-shadow: 0 2px 8px var(--shadow-color);
      }

      .icon {
        font-size: 32px;
        color: #1890ff;
        margin-bottom: 8px;
      }

      span {
        font-size: 14px;
        color: var(--text-color);
      }
    }
  }
  .chart {
    height: 300px;
  }
}
</style>
